<template>

  <BasicDrawer v-bind="$attrs" @register="register" title="订单日志" width="35%">
    <a-spin :spinning="loading">
      <a-timeline mode="alternate">
        <a-timeline-item v-for="log in logs" :key="log.id" :dot="clockIcon" color="gray">
          <!-- 时间显示 -->
          <div class="log-time">
            {{ (log.operateTime) }}
          </div>

          <!-- 操作内容 -->
          <div class="log-content">
            <a-tag color="#1890ff" style="margin-right: 8px">
             {{ (log.operateDesc) }}
            </a-tag>
            <span>操作人：{{ log.operateUser }}</span>

            <!-- 状态变化 -->
            <div class="status-change">
              <div class="status-item">
                <span class="label">旧状态：</span>
                <a-tag :color="getStatusColor(log.preStatus)">
                  {{ (log.preStatus) }}
                </a-tag>
              </div>
              <div class="status-item">
                <span class="label">新状态：</span>
                <a-tag :color="getStatusColor(log.currentStatus)">
                  {{ (log.currentStatus) }}
                </a-tag>
              </div>
            </div>
          </div>
        </a-timeline-item>
      </a-timeline>
    </a-spin>
  </BasicDrawer>

</template>

<script lang="ts" setup>
import { ClockCircleOutlined } from '@ant-design/icons-vue';
import { defineProps, computed, ref, } from 'vue';
import dayjs from 'dayjs';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { defHttp } from '/@/utils/http/axios';
const [register, { closeDrawer: closeDrawer, setDrawerProps: setDrawerProps }] =   useDrawerInner((data) => {

  orderCode.value = data.orderCode;
  const url = "/xl/xlCustomerOrde/getOrderLog?orderCode=" + orderCode.value;
  getLog(url);
});

const orderCode = ref("");
const logs = ref<LogItem[]>();

async function getLog(url) {
  const data = await defHttp.get({ url });
  logs.value = data;
}

//获取日志数据

const loading = ref(false);
interface LogItem {
  operateTime: Date;
  operateType: string;
  operateDesc: string;
  preStatus: string;
  currentStatus: string;
  operateUser: string;
}



const logVisible = ref(false); 
const clockIcon = ref(false);

type StatusMap = Record<string, { text: string; color: string }>;
const statusMap: StatusMap = {
  待提交: { text: '已创建', color: 'blue' },
  待支付: { text: '已支付', color: 'green' },
  待审核: { text: '已发货', color: 'orange' },
  待发货: { text: '已完成', color: 'purple' },
  待收货: { text: '已取消', color: 'red' },
};
const getStatusColor = (status: string): string => {
  return statusMap[status]?.color || 'default';
};
</script>

<style scoped>
.log-time {
  color: rgba(0, 0, 0, 0.45);
  margin-bottom: 8px;
  font-size: 12px;
}

.log-content {
  background: #fafafa;
  padding: 12px;
  border-radius: 4px;
}

.log-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.operator {
  color: rgba(0, 0, 0, 0.65);
  font-size: 13px;
}

.status-change {
  margin-top: 12px;
  display: flex;
  gap: 16px;
}

.status-item {
  display: flex;
  align-items: center;
}

.label {
  color: rgba(0, 0, 0, 0.65);
  margin-right: 4px;
  font-size: 13px;
}
</style>